<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>函数式组件</title>
</head>
<body>
    <div id="container"></div>

    <!-- 加载 React。-->
    <!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。-->
    <script src="../js-react/react@16.development.js" crossorigin></script>
    <script src="../js-react/react-dom@16.development.js" crossorigin></script>
    <!-- babel.min.js用于解析将jsx语法转为js语法 -->
    <script src="../js-react/babel@6.min.js"></script>

    <script type="text/babel">
        // 1. 定义函数式组件，函数名首字母必须大写，必须要有返回值
        function MyComponent() {
            console.log(this)   // 此处的this是undefined，因为babel编译后开启了严格模式"use strict", 严格模式下禁止自定义函数中的this指向window对象(非严格模式下是指向window的)
            return <h1>函数式组件，适用于[简单组件]</h1>
        }
        // 2. 将组件渲染到页面，传入的DOM是组件名，且是闭合的
        ReactDOM.render(<MyComponent/>, document.getElementById('container'))
        /*
            执行了ReactDOM.render(<MyComponent/>, ...)之后发生了生么？
                1. React解析组件标签，找到了MyComponent组件
                2. 发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转换为真实的DOM，随后呈现在页面中
        */
    </script>
</body>
</html>